<template>
    <h2>ref创建对象类型</h2>
    <div class="person">
      <h2>一辆{{ car.brand }}车，价格{{ car.price }}</h2>
      <button @click="changePrice" >修改价格</button>
      <br/>
      <button @click="changeGameName" >修改游戏名称</button>
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
    </div>
</template>

<script lang="ts" setup name="lesson6 vue">
    import {ref} from 'vue'
    //ref也可以创建对象类型
    let car = ref({brand:'大众',price:1000})
    let games = ref([{id:'g01',name:'暗黑4'}, {id:'g02',name:'WOW'}, {id:'g03',name:'星际争霸'} ])
    //ref定义的需要通过value获取
    function changePrice(){
        car.value.price += 100
    }
    function changeGameName(){
        games.value[1].name="帝国时代4"
    }
</script>
<style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
  li{font-size: 15px;}
</style>